<template>
  <el-form ref="form" label-width="0" label-position="left" size="mini">
    <div class="print-config-title">{{ $t('数据设置') }}</div>
    <el-form-item class="mt-16">
      <l-select
        :options="textTypeOption"
        :clearable="false"
        valueKey="id"
        labelKey="name"
        v-model="myConfig.table"
      />
    </el-form-item>
    <template v-if="myConfig.table === 'learun_type_text'">
      <div class="print-config-title">
        {{ $t('文本内容') }}
      </div>
      <el-form-item class="mt-16">
        <el-input
          type="textarea"
          :rows="4"
          :placeholder="$t('请输入')"
          v-model="myConfig.content"
        />
      </el-form-item>
    </template>
    <el-form-item v-else>
      <l-select
        v-model="myConfig.field"
        valueKey="id"
        labelKey="name"
        :options="fieldOptions"
        @change="handleFieldChange"
      />
    </el-form-item>

    <el-form-item
      v-if="pageIndex == 0 && pageConfig.isHeaderShow == '1'"
      :label="$t('页眉')"
      label-width="40px"
    >
      <el-switch v-model="myConfig.isHeader" />
    </el-form-item>
    <div class="print-config-title">{{ $t('条码类型') }}</div>
    <el-form-item>
      <l-select
        :clearable="false"
        :options="barcodeOption"
        v-model="myConfig.barcodeType"
      />
    </el-form-item>
    <div class="print-config-title" v-if="myConfig.barcodeType !== 'qr'">
      {{ $t('文本设置') }}
    </div>
    <el-form-item
      v-if="myConfig.barcodeType !== 'qr'"
      :label="$t('文本显示')"
      label-width="80px"
    >
      <el-switch v-model="myConfig.displayValue" />
    </el-form-item>

    <el-form-item
      :label="$t('文字对齐')"
      label-width="80px"
      v-if="myConfig.barcodeType !== 'qr'"
    >
      <l-select v-model="myConfig.textAlign" :options="textAlignOptions" />
    </el-form-item>

    <el-form-item
      :label="$t('文字字体')"
      label-width="80px"
      v-if="myConfig.barcodeType !== 'qr'"
    >
      <l-select v-model="myConfig.fontOptions" :options="fontOptions" />
    </el-form-item>

    <el-form-item
      :label="$t('文字位置')"
      label-width="80px"
      v-if="myConfig.barcodeType !== 'qr'"
    >
      <l-select
        v-model="myConfig.textPosition"
        :options="textPositionOptions"
      />
    </el-form-item>
    <div class="print-config-title">{{ $t('大小位置') }}</div>
    <el-row class="mt-16">
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="W" label-width="32px">
          <el-input-number
            v-model="myConfig.width"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="X" label-width="32px">
          <el-input-number
            v-model="myConfig.left"
            controls-position="right"
            :min="
              pageIndex == 0 &&
              pageConfig.isHeaderShow == '1' &&
              myConfig.isHeader
                ? -pageConfig.paddingLeft
                : 0
            "
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="H" label-width="32px">
          <el-input-number
            v-model="myConfig.height"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="Y" label-width="32px">
          <el-input-number
            v-model="myConfig.top"
            controls-position="right"
            :min="
              pageIndex == 0 &&
              pageConfig.isHeaderShow == '1' &&
              myConfig.isHeader
                ? -pageConfig.paddingTop
                : 0
            "
          />
        </el-form-item>
      </el-col>
    </el-row>

    <div class="print-config-title mt-16">{{ $t('颜色设置') }}</div>
    <div class="mt-16 ml-8">{{ $t('透明度') }}</div>
    <el-form-item class="ml-8">
      <el-col :span="18">
        <el-slider v-model="myConfig.opacity" />
      </el-col>
      <el-col :span="5" :offset="1">
        <el-input-number
          v-model="myConfig.opacity"
          controls-position="right"
          :min="0"
          :max="100"
        />
      </el-col>
    </el-form-item>
    <el-form-item class="mt-16 ml-8">
      <div style="display: flex">
        <l-checkbox
          :options="[{ label: '条码颜色', value: '1' }]"
          v-model="myConfig.isColor"
        />
        <l-input-color
          :notInput="true"
          v-model="myConfig.color"
          style="margin-left: 8px"
        />
      </div>
    </el-form-item>
    <el-form-item class="mt-16 ml-8">
      <div style="display: flex">
        <l-checkbox
          :options="[{ label: '背景颜色', value: '1' }]"
          v-model="myConfig.isBackgroundColor"
        />
        <l-input-color
          :notInput="true"
          v-model="myConfig.backgroundColor"
          style="margin-left: 8px"
        />
      </div>
    </el-form-item>
    <div class="print-config-title" style="margin-bottom: 16px">{{ $t('边框设置') }}</div>
    <el-form-item>
      <l-select
        :clearable="false"
        :options="borderOption"
        v-model="myConfig.borderLine"
      />
    </el-form-item>
    <el-row>
      <el-col class="form-item-label-pd8" :span="10">
        <el-form-item :label="$t('大小')" label-width="50px">
          <el-input-number
            v-model="myConfig.borderSize"
            controls-position="right"
            :min="0"
            style="width: 60px;"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" :offset="2">
        <el-form-item>
          <img src="../../../../assets/round.svg" style="margin-right: 8px" />
          <el-input-number
            v-model="myConfig.bordeRadius"
            controls-position="right"
            :min="0"
            style="width: 60px;"
          />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item>
          <l-input-color
            :notInput="true"
            style="margin-left: 8px"
            v-model="myConfig.borderColor"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    dbtableList: {
      type: Array,
      default: () => [],
    },
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
    pageIndex: Number,
  },
  data() {
    return {
      barcodeOption: [
        {
          value: "qr",
          label: this.$t("二维码"),
        },
        {
          value: "CODE128",
          label: "CODE128",
        },
        {
          value: "CODE128A",
          label: "CODE128A",
        },
        {
          value: "CODE128B",
          label: "CODE128B",
        },
        {
          value: "CODE128C",
          label: "CODE128C",
        },
        {
          value: "EAN13",
          label: "EAN13",
        },
        {
          value: "EAN8",
          label: "EAN8",
        },
        {
          value: "EAN5",
          label: "EAN5",
        },
        {
          value: "EAN2",
          label: "EAN2",
        },

        {
          value: "UPC",
          label: "UPC",
        },
        {
          value: "CODE39",
          label: "CODE39",
        },
        {
          value: "ITF",
          label: "ITF",
        },
        {
          value: "MSI10",
          label: "MSI10",
        },
        {
          value: "MSI11",
          label: "MSI11",
        },
        {
          value: "MSI1010",
          label: "MSI1010",
        },
        {
          value: "MSI1110",
          label: "MSI1110",
        },
        {
          value: "pharmacode",
          label: "pharmacode",
        },
        {
          value: "codabar",
          label: "codabar",
        },
      ],
      borderOption: [
        {
          value: "solid",
          label: this.$t("实线"),
        },
        {
          value: "dashed",
          label: this.$t("虚线"),
        },
        {
          value: "dotted",
          label: this.$t("点虚线"),
        },
        {
          value: "double",
          label: this.$t("双实线"),
        },
      ],
      textAlignOptions: [
        {
          value: "left",
          label: this.$t("左对齐"),
        },
        {
          value: "center",
          label: this.$t("居中"),
        },
        {
          value: "right",
          label: this.$t("右对齐"),
        },
      ],
      fontOptions: [
        {
          value: "",
          label: this.$t("无效果"),
        },
        {
          value: "bold",
          label: this.$t("加粗"),
        },
        {
          value: "italic",
          label: this.$t("斜体"),
        },
        {
          value: "bold italic",
          label: this.$t("加粗+斜体"),
        },
      ],
      textPositionOptions: [
        {
          value: "top",
          label: this.$t("上"),
        },
        {
          value: "bottom",
          label: this.$t("下"),
        },
      ],
    };
  },
  computed: {
    textTypeOption() {
      return [
        ...this.$deepClone(this.dbtableList),
        {
          id: "learun_type_text",
          name: this.$t("普通文本"),
        },
      ];
    },
    myConfig() {
      return this.config;
    },
    fieldOptions() {
      if (this.myConfig.table != "learun_type_text") {
        const table = this.dbtableList.find((t) => t.id == this.myConfig.table);
        if (table) {
          return this.$deepClone(table.children);
        }
      }

      return [];
    },
  },
  created() {},
  methods: {
    handleFieldChange(obj) {
      if (obj) {
        this.myConfig.label = obj.coment || obj.name;
      }
    },
  },
};
</script>
